<template>
  <div class="ArticlePageWrap">
    <Search></Search>
    <MainNavList></MainNavList>
    <div class="ArticlePageContainer">
      <!-- 侧边栏 -->
      <div class="content-menu">
        <div
          class="menu-item"
          :class="{ 'menu-item-selected': sideCurrentIndex == index }"
          v-for="(item, index) in articleSideList"
          :key="index"
          @click="changeArticleType(index, item.tab)"
        >
          <span data-v-2d2bb288="">{{ item.title }}</span>
          <div data-v-2d2bb288="" class="traingle"></div>
        </div>
      </div>

      <!-- 右侧主内容 -->
      <div class="content-list-view">
        <!-- 主内容头部 -->
        <div class="content-nav">
          <span>排序方式：</span>
          <span
            class="tab-item"
            :class="{ 'tab-item-selected': NavCurrentIndex == index }"
            v-for="(item, index) in articleNavList"
            :key="index"
            @click="changeArticleNavType(index, item.sort)"
            >{{ item.title }}</span
          >
          <div class="tab-underline"></div>
        </div>

        <!-- 主内容主体 -->
        <div
          class="content-list"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <ArticleItem
            v-for="(item, index) in articleData.articleListItems"
            :key="item.id"
            :itemData="item"
            :itemAvatar="getItemAvatar(index)"
          ></ArticleItem>
          <p class="noMore">已经到底啦~</p>
        </div>
      </div>

      <Footer v-if="false"></Footer>
    </div>
  </div>
</template>

<script>
import ArticleItem from './ArticleItem'
import './static/css/aliplayer-min.css'
// import './static/css/app.e0aaa1e1.css'

import Search from '../../components/Search'
import MainNavList from '../../components/MainNavList'
import Footer from '../../components/Footer'

import { reqGetArticle, reqGetArticleAuthor } from '../../utils/api'

export default {
  name: 'ArticlePage',
  components: {
    ArticleItem,
    Search,
    MainNavList,
    Footer
  },
  data() {
    return {
      // 文章数据
      articleData: {},
      // ArticleAuthor
      articleAuthor: [],
      // 文章类型
      articleObject: {
        url: '/Article',
        params: {
          sort: 'new',
          page: 1,
          tab: ''
        }
      },
      // 加载中
      loading: false,
      // 左侧导航栏假数据
      articleSideList: [
        { title: '所有文章', tab: '' },
        { title: '7日热门', tab: '7hot' },
        { title: '30日热门', tab: '30hot' },
        { title: '我的关注', tab: 'follow' },
        { title: '我的收藏', tab: 'fav' },
        { title: '我的文章', tab: 'mine' }
      ],

      // 左侧导航栏当前下标
      sideCurrentIndex: 0,
      // 头部导航栏假数据
      articleNavList: [
        { title: '最新', sort: 'new' },
        { title: '最热', sort: 'hot' },
        { title: '推荐', sort: 'vote' }
      ],
      // 头部导航栏当前下标
      NavCurrentIndex: 0
    }
  },
  async mounted() {
    // 一上来先默认请求所有文章最新
    this.getArticleData(this.articleObject)
    // 绑定滚动到底部触发函数
  },
  methods: {
    // 获取文章数据
    async getArticleData({ url, params, method = 'GET' }) {
      let articleList = await reqGetArticle({
        url,
        params,
        method
      })
      this.articleData = articleList

      // 获取用户头像数组数据
      const authors = await reqGetArticleAuthor()
      this.articleAuthor = authors.data[0].author
    },
    // 获取单项用户头像
    getItemAvatar(index) {
      return this.articleAuthor[index]
    },
    // 改变文章侧边栏类型
    async changeArticleType(index, tab) {
      this.loading = true
      this.articleData = {}

      this.sideCurrentIndex = index
      this.articleObject.params.tab = tab

      await this.getArticleData(this.articleObject)

      this.loading = false
    },
    //改变文章顶部导航栏类型
    async changeArticleNavType(index, sort) {
      this.loading = true
      this.articleData = {}
      // 改变样式
      let postion
      // 缓存你即将操纵的元素
      if (index == 0) {
        postion = '84px'
      } else if (index == 1) {
        postion = '143px'
      } else {
        postion = '202px'
      }
      const element = document.querySelector('.ArticlePageWrap')
      element.style.setProperty('--line-size', postion)

      // 改变当前下标
      this.NavCurrentIndex = index
      // 改变文章类型
      this.articleObject.params.sort = sort
      // 发送请求
      await this.getArticleData(this.articleObject)
      this.loading = false
    }
    // load() {
    //   console.log(1)
    // }
  }
}
</script>

<style scoped lang="less">
.ArticlePageWrap {
  width: 1347px;
  margin-top: 56px;
  margin-left: 172px;
  border: 1px solid #dae1e7;
  --line-size: 84px;
}
.ArticlePageContainer {
  width: 1080px;
  margin: 32px auto 360px;
  display: flex;
}
/* 侧边栏 */
.content-menu {
  width: 201px;
  height: 252px;
  padding: 4px 16px;
  border: 1px solid #dae1e7;
  margin-right: 20px;
  font-size: 14px;
  box-sizing: content-box;
}
.content-menu .menu-item {
  width: 201px;
  height: 41px;
  line-height: 41px;
  border-bottom: 1px dashed #cedce4;
  position: relative;
  cursor: pointer;
}
/* 动态控制类名item-selected */
.menu-item.menu-item-selected .traingle {
  position: absolute;
  right: 0;
  top: 16px;
  border-left: 6px solid #4684e2;
  border-right: none;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.menu-item.menu-item-selected span {
  color: #4684e2;
  font-weight: 600;
}
.menu-item:nth-child(6) {
  border: none;
}
/* 右则主内容 */
.content-list-view {
  width: 825px;
  /* background: rgb(221, 212, 212); */
}
/* <!-- 主内容头部 --> */
.content-list-view .content-nav {
  font-size: 14px;
  display: flex;
  height: 42px;
  line-height: 42px;
}
.content-nav {
  position: relative;
}
.content-nav span:nth-child(1) {
  width: 70px;
}
.content-nav .tab-item {
  text-align: center;
  width: 44px;
  margin-right: 16px;
  color: #999;
}
.tab-item.tab-item-selected {
  color: #000;
}
.content-nav .tab-underline {
  position: absolute;
  left: var(--line-size);
  width: 12px;
  height: 4px;
  background: #4684e2;
  bottom: 0;
  transition: left 0.3s;
}
.searchComtainer {
  background: #fff;
  left: 180px;
  width: 1300px;
}
.footer {
  max-width: 1108px;
  margin: 0 auto;
  padding: 24px 0 20px 54px;
  position: fixed;
  left: 140px;
}
.noMore {
  margin-top: 50px;
  text-align: center;
  font-size: 16px;
}
</style>
